<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JDK 下载器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1 style="color: black !important;">JDK下载助手</h1>
            <p>选择您需要的 JDK 版本并下载到本地</p>
        </header>

        <main>
            <div class="selection-section"> 

                <div class="form-group">
                    <label for="vendor-select">供应商:</label>
                    <select id="vendor-select">
                        <option value="">加载中...</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="os-select">操作系统:</label>
                    <select id="os-select">
                        <option value="">加载中...</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="arch-select">架构:</label>
                    <select id="arch-select">
                        <option value="">加载中...</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="version-select">JDK 版本:</label>
                    <select id="version-select">
                        <option value="">加载中...</option>
                    </select>
                </div>

                <button id="download-btn" class="download-btn" disabled>
                    开始下载
                </button>
            </div>

            <div class="download-section" id="download-section" style="display: none;">
                <h2>下载进度</h2>

                <div class="download-info">
                    <p id="download-file-name">正在准备下载...</p>
                    <div class="progress-container">
                        <div class="progress-bar" id="progress-bar">
                            <div class="progress-fill" id="progress-fill"></div>
                        </div>
                        <span class="progress-text" id="progress-text">0%</span>
                    </div>
                    <p class="download-details" id="download-details">
                        已下载: 0 MB / 总大小: 0 MB
                    </p>
                </div>

                <div class="download-status" id="download-status">
                    <p>准备开始下载...</p>
                </div>

                <button id="cancel-btn" class="cancel-btn" style="display: none;">
                    取消下载
                </button>
            </div>

            <div class="result-section" id="result-section" style="display: none;">
                <h2>下载完成</h2>
                <div class="result-info">
                    <p id="result-message">JDK 下载成功！</p>
                    <p id="result-path">文件保存路径: </p>
                </div>
            </div>
        </main>
    </div>

    <script src="renderer.js"></script>
</body>
</html>
